import styled from './index.module.scss'
import {useCallback, useEffect, useState} from 'react'
import {recommend} from '@/api'
import {recommendList} from '@/type/homeType'
import config from '@/static/config'
import {useNavigate} from 'react-router-dom'
import Base64 from '@/utils/base64'
export const MainRecommend = () => {
	const [list, setList] = useState<recommendList[]>([])
	const navigate = useNavigate()
	useEffect(() =>{
		recommend().then(res => {
			setList(res.data)
		})
	},[])

	const onClick = useCallback((item:recommendList) => {
		const base:Base64 = new Base64()
		const str = `product_id=${item.product_id}`
		navigate(`/home/productinfo/${base.encode(str)}`,{
			replace: true
		})
	},[])

	return (
		<div className={styled.recommend}>
			<div className={styled.recommend_box}>
				{
					list.map(item => (
						<div
							className={styled.recommend_list}
							key={item.id}
							onClick={() => onClick(item)}
						>
							<img
								height={180}
								width={180}
								src={config.productImgUrl + item.product_pic}
							/>
							<div className={styled.recommend_list_name}>{item.product_name}</div>
							<div className={styled.recommend_list_info}>
								<span>
									<div className={item.discount !== 0 && styled.recommend_list_info_discount}>&yen;{item.product_money}</div>
									{
										item.discount !== 0 && (<div>&yen;{item.discount}</div>)
									}
								</span>
								<span>{item.product_order}人付款</span>
								<span>{item.product_address}</span>
							</div>
						</div>
					))
				}
			</div>
		</div>
	)
}
